<template>
<view class="container">
	<!-- 商品滚动区 -->
	<view class="uni-padding-wrap">
		<view class="page-section swiper">
			<view class="page-section-spacing">
				<swiper class="swiper" 
				:indicator-dots="mallMoveConfig.indicatorDots" 
				:autoplay="mallMoveConfig.autoplay" 
				:interval="mallMoveConfig.interval" 
				:duration="mallMoveConfig.duration">
					<swiper-item>
						<view class="swiper-item">
							<image class="swiper-image" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/155997/8/25275/158819/619cc945Ef6b2f763/5a77b01ee8fb753f.jpg!cr_1053x420_4_0!q70.jpg.dpg"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="swiper-image" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/154387/36/22371/390791/61a6959cE90db3b25/2309188c4e6fbb04.jpg!cr_1125x449_0_166!q70.jpg.dpg"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image class="swiper-image" src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/144835/38/22484/152110/619f3e51E164ec024/32659f4ac5bec15c.jpg!cr_1053x420_4_0!q70.jpg.dpg"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
	<!-- 商品导航列表 -->
	<view class="mall-nav-mod">
		<view class="mall-nav-item" v-for="item in mallNavList">
			<image class="mall-nav-img" :src="item.image"></image>
			<view class="mall-nav-ms">{{item.name}}</view>
		</view>
	</view>
	
	<!-- 商品列表 -->
	<view class="mall-list-mod">
		<view class="mall-list-item" v-for="item in mallList">
			<view class="mall-list-inter">
				<image class="mall-list-img" :src="item.image"></image>
				<view class="mall-list-ms1">{{item.name}}</view>
				<view class="mall-list-ms2">
					<view class="mall-price1">{{item.price}}</view>
					<view class="mall-price2">
						<view class="mall-other-label">看相似</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
export default {
	data() {
		return {
			// 商品滚动区
			mallMoveConfig: {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			},
			
			// 商品导航列表
			mallNavList: [{
				id: '101',
				name: '京东超市',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '102',
				name: '数码电器',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg',
			},{
				id: '103',
				name: '京东服饰',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '104',
				name: '京东生鲜',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '105',
				name: '京东到家',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '106',
				name: '充值缴费',
				image: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg',
			},{
				id: '107',
				name: '物流查询',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '108',
				name: '领券',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '109',
				name: '领金贴',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			},{
				id: '110',
				name: 'PLUS会员',
				image: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg',
			}],
			// 商品列表
			mallList: [{
				id: '101',
				name: '碧云泉N9水素智能净水器家用 富氢加热一体反渗透台式直饮水净饮机 莱克 N9极光-2021旗舰版 .',
				image: '//img30.360buyimg.com/mobilecms/s372x372_jfs/t1/142245/6/20727/115499/619cacefE0e820a20/a6d333744c1b0f4d.jpg!q70.dpg.webp',
				price: 99.9,
			},{
				id: '102',
				name: '石头（roborock）扫地机器人T7S Plus 扫拖一体机智能吸尘器家用激光导航规划全自动拖地机A2300RR .',
				image: '//img13.360buyimg.com/mobilecms/s372x372_jfs/t1/222994/7/4391/136218/61a609a4E7048c3b2/ab62aa5545b50387.jpg!q70.dpg.webp',
				price: 199.9,
			},{
				id: '103',
				name: '玉兰油（OLAY）抗糖小白瓶精华液75ml面部精华护肤品化妆品 美白精华 烟酰胺补水亮肤祛黄 .',
				image: '//img14.360buyimg.com/mobilecms/s372x372_jfs/t1/135894/6/24550/197441/61a702aeEd45a9eec/fa36df63ece5884d.jpg!q70.dpg.webp',
				price: 299.9,
			}],
		}
	},
	methods: {

	}
}
</script>

<style>
/* 其它 */
.container{
	background-color: #f7f7f7;
}
.mall-nav-mod{
	margin-top: 20rpx;
}
.mall-list-mod{
	margin: 40rpx 10rpx 0;
}
/* 商品滚动区 */
.uni-padding-wrap{
	text-align: center;
}
.uni-padding-wrap .swiper-image{
	height: 280rpx;
	text-align: center;
	border-radius: 20rpx;
}
/* 商品导航列表 */
.mall-nav-mod{
	display: flex;
	flex-wrap: wrap;
}
.mall-nav-mod .mall-nav-item{
	width: 20%;
	text-align: center;
}
.mall-nav-mod .mall-nav-img{
	width: 88rpx;
	height: 88rpx;
	margin-top: 20rpx;
}
.mall-nav-mod .mall-nav-ms{
	white-space: nowrap;
	font-size: 13px;
	margin-top: 4rpx;
}

/* 商品列表 */
.mall-list-mod{
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
}
.mall-list-mod .mall-list-item{
	width: 50%;
	box-sizing: border-box;
	text-align: center;
	padding: 0 10rpx;
	margin-bottom: 20rpx;
}
.mall-list-mod .mall-list-inter{
	background-color: #FFF;
	padding-bottom: 20rpx;
	border-radius: 16rpx;
	overflow: hidden;
}
.mall-list-mod .mall-list-img{
	width: 350rpx;
	height: 350rpx;
}
.mall-list-mod .mall-list-ms1{
	color: #1a1a1a;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mall-list-mod .mall-list-ms2{
	display: flex;
	line-height: 44rpx;
}
.mall-list-mod .mall-price1{
	flex: 1;
	text-align: left;
	color: #fa2c19;
}
.mall-list-mod .mall-price2{
	flex: 1;
	text-align: right;
}
.mall-other-label{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	color: grey;
	font-size: 22rpx;
	height: 44rpx;
	padding: 0 10rpx;
	background-color: #f0f2f5;
	border-radius: 20rpx;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
</style>
